<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:replace="include/css"/>
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
            background: url(/static/images/findpassword.jpg) no-repeat 0px 0px;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        }
    </style>
</head>
<body>
<th:block th:replace="include/header:: header"/>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<div class="main">
    <div class="container-fluid" style="min-height: 500px;">
        <div class="col-lg-6">
            <form class="form-horizontal" id="registerform">
                <div class="form-group">
                    <label class="col-lg-2 control-label">用户名:</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="userName" id="username"
                               placeholder="长度1-20位字符，中文、数字、_ 、字母">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">邮箱:</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="email" id="email" placeholder="用于取回密码,请填写正确的常用邮箱">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">密码：</label>
                    <div class="col-lg-10">
                        <input type="password" class="form-control" name="password" id="password"
                               placeholder="密码长度6-16位字符，由数字、字母组成">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">确认密码:</label>
                    <div class="col-lg-10">
                        <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入登录密码">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-lg-10 col-lg-offset-2">
                        <button id="reset" type="reset" class="btn btn-info">重置</button>
                        <button id="register" type="button" class="btn btn-success">注册</button>
                    </div>
                </div>

                <div id="popup-captcha"></div>
            </form>

            <script>
                function checkForm(content, doc) {
                    var d = dialog({
                        content: content,
                        align: 'right',
                        quickClose: true // 点击空白处快速关闭
                    });
                    d.show(document.getElementById(doc));
                }

                var handlerPopup = function (captchaObj) {
                    // 成功的回调
                    captchaObj.onSuccess(function () {
                        var loadingindex = layer.load(0, {
                            shade: [0.1, '#fff'] //0.1透明度的白色背景
                        });
                        $.ajax({
                            url: '/register.do',
                            type: 'post',
                            dataType: 'json',
                            data: $('#registerform').serialize(),
                            success: function (data) {
                                layer.close(loadingindex);
                                if (data.errorMsg == null) {
                                    var d = dialog({
                                        content: "<div><img src='/static/images/loading.gif' />&nbsp;&nbsp;&nbsp;注册成功,登录中......</div>",
                                    });
                                    d.showModal();
                                    setTimeout(function () {
                                        d.close().remove();
                                        document.location.href = '/';
                                    }, 1500);
                                } else {
                                    var d = dialog({
                                        width: 200,
                                        content: data.errorMsg,
                                        quickClose: true // 点击空白处快速关闭
                                    });
                                    d.show();
                                }
                            }
                        });
                    });
                    $("#register").click(function () {
                        var username = $('#username').val();
                        var email = $('#email').val();
                        var password = $('#password').val();
                        var confirmPassword = $('#confirmPassword').val();
                        var emailreg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                        var passwordreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;

                        if (username == null || $.trim(username) == '') {
                            checkForm('用户名不能是空串', 'username');
                            $("#username").parent().parent().addClass('has-error');
                        } else if (username.indexOf(" ") > -1) {
                            checkForm('用户名不能含有空格', 'username');
                            $("#username").parent().parent().addClass('has-error');
                        } else if (username.length < 1) {
                            checkForm('用户名长度不能小于1个字符', 'username');
                            $("#username").parent().parent().addClass('has-error');
                        } else if (username.length > 20) {
                            checkForm('用户名长度不能大于20个字符', 'username');
                            $("#username").parent().parent().addClass('has-error');
                        } else if (!emailreg.test(email)) {
                            $("#username").parent().parent().removeClass('has-error');
                            checkForm('请输入正确的常用邮箱', "email");
                            $("#email").parent().parent().addClass('has-error');
                        } else if (password == null || $.trim(password) == '') {
                            $("#email").parent().parent().removeClass('has-error');
                            checkForm('密码不能是空串', 'password');
                            $("#password").parent().parent().addClass('has-error');
                        } else if (password.indexOf(" ") > -1) {
                            checkForm('密码不能含有空格', 'password');
                            $("#password").parent().parent().addClass('has-error');
                        } else if (password.length < 6) {
                            checkForm('密码长度不能小于6个字符', 'password');
                            $("#password").parent().parent().addClass('has-error');
                        } else if (password.length > 16) {
                            checkForm('密码长度不能大于16个字符', 'password');
                            $("#password").parent().parent().addClass('has-error');
                        } else if (!passwordreg.test(password)) {
                            checkForm('密码必须含有字母和数字', 'password');
                            $("#password").parent().parent().addClass('has-error');
                        } else if (confirmPassword != password) {
                            $("#password").parent().parent().removeClass('has-error');
                            checkForm('两次输入密码必须一致', 'confirmPassword');
                            $("#confirmPassword").parent().parent().addClass('has-error');
                        } else {
                            $("#confirmPassword").parent().parent().removeClass('has-error');
                            captchaObj.show();
                        }
                    });
                    // 将验证码加到id为captcha的元素里
                    captchaObj.appendTo("#popup-captcha");
                    // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
                };
                // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
                $.ajax({
                    url: "geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        // 使用initGeetest接口
                        // 参数1：配置参数
                        // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
                        initGeetest({
                            gt: data.gt,
                            challenge: data.challenge,
                            product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                            offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                            // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
                        }, handlerPopup);
                    }
                });
            </script>
        </div>
    </div>

</div>
<th:block th:replace="include/footer:: footer"/>
<th:block th:replace="include/top"/>
</body>
</html>